<template>
  <div>
    <p>
      <el-checkbox @change="choseAll" v-model="defaultChecked"></el-checkbox>
      选中商品总价:{{totalPrice}}
      <el-button type="warning" @click="sort()">价格低=>高</el-button>
      <el-button type="danger" @click="reverse()">价格高=>低</el-button>
      <el-input @clear="search()" placeholder="请输入商品名" clearable style="width:130px;" v-model="key"></el-input>
      <el-button @click="search()">搜索</el-button>
    </p>
    <p>
      <el-input placeholder="最低价格" v-model="area.min" style="width:100px;"></el-input>
      <el-input placeholder="最高价格" v-model="area.max" style="width:100px;"></el-input>
      <el-button @click="areaSearch">搜索</el-button>
    </p>
    <el-table :data="goodsList" stripe style="width: 100%">
      <el-table-column label="操作" width="50">
        <template slot-scope="scope">
          <el-checkbox @change="chose" v-model="scope.row.checked"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="名称" width="180"></el-table-column>
      <el-table-column label="图片" width="120">
        <template slot-scope="scope">
          <!-- <el-image :src="scope.row.pic">
          </el-image>-->
          <el-image
            style="width: 100px; height: 100px"
            lazy
            :src="scope.row.pic"
            :preview-src-list="[scope.row.pic]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="180"></el-table-column>
      <el-table-column label="商品添加" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="plus(scope.row)" type="warning">+</el-button>
          {{scope.row.num}}
          <el-button size="mini" @click="substract(scope.row)" type="warning">-</el-button>
        </template>
      </el-table-column>
      <el-table-column label="小计" width="100">
        <template slot-scope="scope">{{scope.row.price*scope.row.num}}</template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: {},
  computed: {
    goodsList() {
      return this.$store.state.list;
    },
    totalPrice() {
      return this.$store.getters.getTotalPrice;
    },
    defaultChecked() {
      return this.$store.state.defaultChecked;
    }
  },
  data() {
    return {
      key: "",
      area: {
        max: "",
        min: ""
      }
    };
  },
  watch: {},
  methods: {
    plus(info) {
      this.$store.commit("plus", info);
    },
    substract(info) {
      this.$store.commit("substract", info);
    },
    del(info) {
      this.$store.commit("del", info);
    },
    chose() {
      this.$store.commit("chose");
    },
    choseAll() {
      this.$store.commit("choseAll");
    },
    sort() {
      this.$store.commit("sort");
    },
    reverse() {
      this.$store.commit("reverse");
    },
    search() {
      this.$store.commit("search", this.key);
    },
    areaSearch() {
      this.$store.commit("areaSearch", this.area);
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.$store.commit("getList");
    this.key = this.$store.state.keyWord;
  }
};
</script> 
<style scoped>
</style>
